//1.tasks 数据结构
let tasks = [
    { id: 1, text: "睡觉", completed: false },
    { id: 2, text: "吃饭", completed: true },
    { id: 3, text: "打豆豆", completed: false }
  ];
  console.log(tasks);
  
  //2.获取元素
  let addBtn = document.querySelector(".addtask .addbtn");
  let inputText = document.querySelector(".addtask input");
  let ul = document.querySelector(".tasklist ul");
  let category =document.querySelector(".category")
  
  
  
  //3. 事件添加
  
  // window onload 事件
  window.addEventListener('load',function () {
    // 渲染
    renderTasks(tasks);
    //添加事件
  })
  // 添加按钮
  addBtn.addEventListener('click', function () {
    //数据添加
    //1.产生数据-task对象
    //数组最有一个值+1
    let id = tasks[tasks.length-1].id+1;
    const task = {
      id: id, text: inputText.value, completed: false
    };
    //2.把对象放到tasks数组中
    tasks.push(task);
    //3.显示下
    // console.log(tasks);
    //4.渲染
    renderTasks(tasks);
    
  });
  // category添加事件-filter 判断是哪个按钮--事件委托
  category.addEventListener('click',function (e) {
    if (e.target.tagName=="BUTTON") {
      // 获取自定义属性中的值
      const filter = e.target.dataset.filter;
      //渲染
      renderTasks(filterTasks(tasks,filter))
    }
  })
  
  // 4.函数
  function renderTasks(tasks) {
    // 任务列表的渲染
    //清空现有ul中html
    ul.innerHTML = '';
    tasks.forEach(task => {
      // 创建一个元素
      const li = document.createElement('li');
      // 修改元素的html内容
      li.innerHTML = `<div class="left">
              <input type="checkbox" ${task.completed?'checked':''} >
              <span class="${task.completed?'line':''}">${task.text}</span>
            </div>
            <div class="btn-group">
              <button>编辑</button>
              <button>删除</button>
            </div>
        `;
        // 修改li中checkbox的checked属性
      // const input = li.querySelector("input");
      
      // input.checked = task.completed;
      // console.log(input.checked);
      // 把元素放到ul中
      ul.appendChild(li)
        // 底部统计数据的渲染
        //生成统计数据
        let all = tasks.length;
        let completed = tasks.filter(task=>task.completed).length;
        let uncompleted = all - completed;
        
    // 修改对应元素的数据
      // const spans = document.querySelectorAll('.footer span');
      // spans[0].textContent = `全部 ${all}`;
      // spans[1].textContent = `已完成 ${completed}`;
      // spans[2].textContent = `未完成 ${uncompleted}`;
      
      //获取元素的另外的方法
      document.querySelector('.footer span:nth-child(1)').textContent = `全部 ${all}`;
      document.querySelector('.footer span:nth-child(2)').textContent = `已完成 ${completed}`;
      document.querySelector('.footer span:nth-child(3)').textContent = `未完成 ${uncompleted}`;
    });
  }
  // 
  // input :
  /*
    功能：分类过滤函数
    输入：tasks-所有任务，filter[all,completed,uncompleted] 
    输出：过滤后的任务
  */
  function filterTasks(tasks,filter) {
    switch (filter) {
      case "completed":
       return tasks.filter(task=>task.completed);
      case "uncompleted":
        return  tasks.filter(task=>!task.completed);
      default:
        return tasks;
    }
  }
  
  
  
  